<template>
	<div>
		<!-- 按钮 -->
		<template v-if="$attrs.type=='button'">
			<el-button v-bind="$attrs.props">
				{{ $attrs.children[0] }}
			</el-button>
		</template>
		<!-- 单/多选 -->
		<template v-else-if="$attrs.type=='radio'">
			<el-radio-group v-bind="$attrs.props">
				<el-radio :label="item.value" v-for="(item, index) in $attrs.options" :key="index">{{ item.label }}
				</el-radio>
			</el-radio-group>
		</template>
		<template v-else-if="$attrs.type=='checkbox'">
			<el-checkbox-group :value="[]" v-bind="$attrs.props">
				<el-checkbox :label="item.value" v-for="(item, index) in $attrs.options" :key="index">{{ item.label }}
				</el-checkbox>
			</el-checkbox-group>
		</template>
		<!-- <template v-else-if="['checkbox','radio'].includes($attrs.type)">
			<components :is="getComponents(1)" v-bind="$attrs.props">
				<components :is="getComponents('')" :label="item.value" v-for="(item, index) in $attrs.options"
					:key="index">{{ item.label }}
				</components>
			</components>
		</template> -->
		<template v-else-if="$attrs.type=='span'">
			<span>
				{{ $attrs.children[0] }}
			</span>
		</template>
		<!-- <template v-else>
			<components :is="'el-'+ $attrs.type" v-bind="$attrs.props" />
		</template> -->
		<template v-else>
			<components :is="'el-'+ $attrs.type" v-bind="$attrs.props">
				<components v-if="$attrs.options && $attrs.options.length" v-for="(item, index) in $attrs.options"
					:value="item.value" :label="item.label"  :key="index"/>
				<components v-if="$attrs.children && $attrs.children.length" v-for="(item, index) in $attrs.children" :key="index">
					<span v-if="(typeof item)">{{item}}</span>
					<xw-draggable ref='XwDraggable' @draggable='draggable' />
				</components>
			</components>
		</template>
	</div>
</template>

<script>
	// import XwDraggable from './Draggable'
	export default {
		methods: {
			draggable() {},
			getComponents(type) {
				console.log('el-' + this.$attrs.type + (type ? '-group' : '') + (this.$attrs.props.type == 'button' ?
					'-button' : ''))
				return 'el-' + this.$attrs.type + (type ? '-group' : '') + (this.$attrs.props.type == 'button' ?
					'-button' : '')
			}
		}
	}
</script>

<style>
</style>